<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed">
      <div class="logo">
        <p v-if="!collapsed">MIS</p>
      </div>
      <a-menu
        :selected-keys="selectedKeys"
        mode="inline"
        theme="dark"
        :openKeys="opens"
        @select="select"
        @openChange="openChange">
        <template v-for="item in menus">
          <a-menu-item :key="item.id" v-if="!item?.children?.length">
            <router-link :to="{ name: item.path }">
              <component v-if="item.icon" :is="$antIcons[item.icon]" />
              <span>{{ item.name }}</span>
            </router-link>
          </a-menu-item>
          <sub-menu v-else :menu-info="item" :key="item.id" />
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="my-header-box">
        <my-header></my-header>
      </a-layout-header>
      <a-layout-content>
        <!-- 面包屑 -->
        <breadcrumb-list></breadcrumb-list>
        <!-- 导航栏 -->
        <nagivator-list></nagivator-list>
        <div :style="{ padding: '24px', paddingTop: '125px'}">
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { mapGetters, mapState, useStore } from 'vuex'
import { mutations } from '../../store/types'
import header from './header.vue'
import nagivatorList from './nagivator-list.vue'
import breadcrumbList from './breadcrumb-list.vue'
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.id" v-bind="$attrs">
        <template #title>
          <span>
            <component v-if="menuInfo.icon" :is="$antIcons[menuInfo.icon]" />
            <span>{{ menuInfo.name }}</span>
          </span>
        </template>
        <template v-for="item in menuInfo.children" :key="item.id">
          <template v-if="!item.children">
            <a-menu-item :key="item.id">
              <component v-if="item.icon" :is="$antIcons[item.icon]" />
              <router-link :to="{ name: item.path }">
                {{ item.name }}
              </router-link>
            </a-menu-item>
          </template>
          <template v-else>
            <sub-menu :menu-info="item" :key="item.id" />
          </template>
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  props: {
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  }
}

export default defineComponent({
  components: {
    'sub-menu': SubMenu,
    'my-header': header,
    nagivatorList,
    breadcrumbList
  },
  setup () {
    const store = useStore()
    return { store }
  },
  methods: {
    openChange (openkeys: string[]) {
      this.store.commit(`system/${mutations.system.opens}`, openkeys)
    },
    select ({ selectedKeys } : { selectedKeys: string[] } ) {
      this.store.commit(`system/${mutations.system.selectedKeys}`, selectedKeys)
    }
  },

  computed: {
    ...mapState('system', [
      'menus'
    ]),
    ...mapGetters({
      'collapsed': 'system/collapsed',
      'selectedKeys': 'system/selectedKeys',
      'opens': 'system/opens'
    })
  }
})
</script>

<style lang="scss" scoped>
.logo {
  height: 28px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.my-header-box {
  padding: 0;
}
// .site-layout .site-layout-background {
//   background: #fff;
// }
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
